<template>
    <div class="page-container">
      <!-- 顶部操作栏 -->
      <div class="header-bar">
        <el-input
          v-model="searchVal"
          placeholder="输入类别名称查询"
          style="width: 200px; margin-left: 10px"
          clearable
        />
        <el-select
          v-model="showStatus"
          placeholder="显示启用类别"
          style="width: 160px"
          clearable
        >
          <el-option label="显示启用类别" value="enabled"></el-option>
          <el-option label="显示禁用类别" value="disabled"></el-option>
        </el-select>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="warning" @click="handleDisable">禁用</el-button>
        <el-button type="success" @click="handleEnable">启用</el-button>
        <el-button @click="handleRefresh">刷新</el-button>
      </div>
  
      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              class="table-action-btn"
            >修改</el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="handleDeleteConfirm(scope.row)"
              style="color: red"
              class="table-action-btn"
            >删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="类别" />
        <el-table-column label="状态" width="80">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页（可选，根据需求补充） -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-sizes="[10, 20, 50]"
        :page-size="pageInfo.size"
        :total="pageInfo.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      />
  
      <!-- 新增弹窗 -->
      <el-dialog title="新增客户类别" v-model="addDialogVisible" width="30%">
        <el-form :model="addForm" label-width="100px">
          <el-form-item label="上级分类">
            <el-input v-model="addForm.parentCategory" placeholder="请输入上级分类" />
          </el-form-item>
          <el-form-item label="*类别" required>
            <el-input v-model="addForm.categoryName" placeholder="请输入类别名称" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addDialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="handleAddConfirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 编辑弹窗 -->
      <el-dialog title="修改客户类别信息" v-model="editDialogVisible" width="30%">
        <el-form :model="editForm" label-width="100px">
          <el-form-item label="上级分类">
            <el-input v-model="editForm.parentCategory" placeholder="请输入上级分类" />
          </el-form-item>
          <el-form-item label="类别">
            <el-input v-model="editForm.categoryName" placeholder="请输入类别名称" disabled />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleEditConfirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 删除确认弹窗 -->
      <el-dialog title="系统提示" v-model="deleteConfirmVisible" width="30%">
        <div>删除的类别信息将不能恢复，请确认是否删除？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="deleteConfirmVisible = false">取消</el-button>
            <el-button type="primary" @click="handleDelete">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  
  // 响应式数据
  const searchVal = ref('')
  const showStatus = ref('enabled') // 控制显示启用/禁用类别
  const tableData = ref([
    { id: 1, categoryName: '广东省内', status: true },
    { id: 2, categoryName: '华北地区', status: true },
    { id: 3, categoryName: '|-零售', status: true },
    { id: 4, categoryName: '|-批发', status: true },
    { id: 5, categoryName: '华东地区', status: true },
    { id: 6, categoryName: '|-批发', status: true },
    { id: 7, categoryName: '华南地区', status: true },
    { id: 8, categoryName: '华中地区', status: true }
  ])
  const pageInfo = reactive({
    page: 1,
    size: 10,
    total: 8
  })
  const addDialogVisible = ref(false)
  const addForm = reactive({
    parentCategory: '',
    categoryName: ''
  })
  const editDialogVisible = ref(false)
  const editForm = reactive({
    parentCategory: '',
    categoryName: ''
  })
  const deleteConfirmVisible = ref(false)
  let currentDeleteRow = ref({}) // 记录当前待删除行
  let currentEditRow = ref({}) // 记录当前待编辑行
  const selectedRows = ref([]) // 批量操作选中项
  
  // 查询逻辑
  const handleQuery = () => {
    console.log('查询条件：', {
      searchVal: searchVal.value,
      showStatus: showStatus.value
    })
    // 可在此处调用接口，根据条件过滤 tableData
  }
  
  // 新增弹窗 —— 打开
  const handleAdd = () => {
    addDialogVisible.value = true
    // 重置表单
    addForm.parentCategory = ''
    addForm.categoryName = ''
  }
  
  // 新增弹窗 —— 确定
  const handleAddConfirm = () => {
    console.log('新增表单数据：', addForm)
    // 可在此处调用接口，提交新增逻辑
    // 模拟新增一条数据
    tableData.value.push({
      id: Date.now(),
      categoryName: addForm.categoryName,
      parentCategory: addForm.parentCategory,
      status: true
    })
    addDialogVisible.value = false
  }
  
  // 编辑弹窗 —— 打开
  const handleEdit = (row) => {
    editDialogVisible.value = true
    currentEditRow.value = row
    // 回显数据
    editForm.parentCategory = row.parentCategory || ''
    editForm.categoryName = row.categoryName
  }
  
  // 编辑弹窗 —— 确定
  const handleEditConfirm = () => {
    console.log('编辑表单数据：', editForm)
    // 可在此处调用接口，提交编辑逻辑
    // 模拟更新表格数据
    const targetRow = tableData.value.find(item => item.id === currentEditRow.value.id)
    if (targetRow) {
      targetRow.parentCategory = editForm.parentCategory
      targetRow.categoryName = editForm.categoryName
    }
    editDialogVisible.value = false
  }
  
  // 删除 —— 打开确认弹窗
  const handleDeleteConfirm = (row) => {
    deleteConfirmVisible.value = true
    currentDeleteRow.value = row
  }
  
  // 删除 —— 确定
  const handleDelete = () => {
    console.log('删除数据：', currentDeleteRow.value)
    // 可在此处调用接口，提交删除逻辑
    // 模拟从表格移除数据
    const index = tableData.value.findIndex(item => item.id === currentDeleteRow.value.id)
    if (index > -1) {
      tableData.value.splice(index, 1)
    }
    deleteConfirmVisible.value = false
  }
  
  // 状态切换（启用/禁用）
  const handleStatusChange = (row) => {
    console.log('状态变更：', row.categoryName, ' -> ', row.status)
    // 可在此处调用接口，更新状态
  }
  
  // 分页逻辑（可选，根据需求完善）
  const handleSizeChange = (val) => {
    pageInfo.size = val
  }
  const handleCurrentChange = (val) => {
    pageInfo.page = val
  }
  
  // 刷新
  const handleRefresh = () => {
    console.log('触发刷新逻辑')
    // 可在此处重新拉取表格数据
  }
  
  // 禁用（批量操作）
  const handleDisable = () => {
    console.log('触发禁用逻辑，选中项：', selectedRows.value)
    selectedRows.value.forEach(item => {
      item.status = false
    })
  }
  
  // 启用（批量操作）
  const handleEnable = () => {
    console.log('触发启用逻辑，选中项：', selectedRows.value)
    selectedRows.value.forEach(item => {
      item.status = true
    })
  }
  
  // 监听表格选中项变化
  const handleSelectionChange = (val) => {
    selectedRows.value = val
  }
  </script>
  
  <style scoped>
  .page-container {
    padding: 20px;
  }
  .header-bar {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .dialog-footer {
    text-align: right;
  }
  
  /* 自定义按钮样式 */
  .table-action-btn {
    padding: 0 !important; /* 移除默认内边距 */
    margin: 0 5px !important; /* 调整按钮间距 */
    min-width: 60px; /* 设置最小宽度 */
  }
  </style>